<!doctype html>
<html lang="en">
	<head>
	    <style>
	        body {
	            color: #000000;
	            font-family: "Calibri", Arial, sans-serif;
	            font-size: 0.8em;
	            overflow: hidden;
	        }
			
			ul, p {
				-webkit-margin-before: 0em;
				-webkit-margin-after: 0em;
				-webkit-padding-start: 0px;
			}
	    </style>
	    
	    <link rel="stylesheet" href="../mainStyles/location.css" />
	    <link rel="stylesheet" href="../mainStyles/tabs.css" />
	    <link rel="stylesheet" href="../mainStyles/antiscroll.css" />
	    <link rel="stylesheet" href="../mainStyles/highslide.css" />
	    
	  	<script type="text/javascript" src="../scripts/jquery.min.js"></script>
	  	<script src="../scripts/antiscroll.js"></script>
		<script type="text/javascript" src="../scripts/highslide-full.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('a.listItem').click(function(){
					$('source').remove();
					var $nextAudio = $(this).attr("href");
					var $nextAudio1 = $(this).attr("href");
					$nextAudio= "audio/" + $nextAudio + ".ogg";
				   	$nextAudio1= "audio/" + $nextAudio1 + ".mp3";
					$('<source>').attr('src', $nextAudio).appendTo('audio'); 
				   	$('<source>').attr('src', $nextAudio1).appendTo('audio'); 
					$('Your browser does not support the audio element. Use old version.').appendTo('audio');
					$('audio').load();
					$('div.info1').html($(this).html());
				
				return false;
				});
				
				$(".antiscroll-wrap").antiscroll();
			  	
				$('ul.tabs').each(function(){
					// For each set of tabs, we want to keep track of
					// which tab is active and it's associated content
					var $active, $content, $links = $(this).find('a');
			
					// If the location.hash matches one of the links, use that as the active tab.
					// If no match is found, use the first link as the initial active tab.
					$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
					$active.addClass('active');
					$content = $($active.attr('href'));
			
					// Hide the remaining content
					$links.not($active).each(function () {
						$($(this).attr('href')).hide();
					});
			
					// Bind the click event handler
					$(this).on('click', 'a', function(e){
						// Make the old tab inactive.
						$active.removeClass('active');
						$content.hide();
			
						// Update the variables with the new link and content
						$active = $(this);
						$content = $($(this).attr('href'));
			
						// Make the tab active.
						$active.addClass('active');
						$content.show();
			
						// Prevent the anchor's default click action
						e.preventDefault();
					});
				});  
			});
		</script>

	  	<script type="text/javascript">
			hs.graphicsDir = '../images/highslide/';
			hs.align = 'center';
			hs.transitions = ['expand', 'crossfade'];
			hs.fadeInOut = true;
			hs.dimmingOpacity = 0.8;
			hs.outlineType = 'rounded-white';
			hs.captionEval = 'this.thumb.alt';
			hs.marginBottom = 105; // make room for the thumbstrip and the controls
			hs.numberPosition = 'caption';
			
			// Add the slideshow providing the controlbar and the thumbstrip
			hs.addSlideshow({
				//slideshowGroup: 'group1',
				interval: 3500,
				repeat: false,
				useControls: true,
				overlayOptions: {
					className: 'text-controls',
					position: 'bottom center',
					relativeTo: 'viewport',
					offsetY: -90
				},
				thumbstrip: {
					position: 'bottom center',
					mode: 'horizontal',
					relativeTo: 'viewport'
				}
			});
		</script>
	</head>
	
	<body>
		<table>
			<tr>
				<td width="120" rowspan="2" style="padding-right: 10px;"><img src="kieran/thumbnails/01.jpg" width="120" height="120" alt="Kieran Gatehouse"/></td>
				<td>
					<div class="building-name">Kieran Gatehouse</div>
					<p class="building-date">Built in 1865</p>
				</td>
			</tr>
		</table>
		
		<div>
			<ul class="tabs">
				<li><a href="#tabs1">Info</a></li>
			    <li><a href="#tabs2">Audio</a></li>
			    <li><a href="#tabs3">Gallery</a></li>
			    <li><a href="#tabs4">Misc</a></li>
			</ul>
		</div>
		
		<div id="tabs1">
			<div class="antiscroll-wrap">
	        	<div class="antiscroll-inner">
    				<p>Listed on the state and national Registers of Historic Places, the Kieran Gatehouse dates to 1865 and was a gatehouse on the estate purchased by the Marist Brothers in 1908. This quaint cottage has remained in constant use, first as a headquarters for the Poughkeepsie Province of the Marist Brothers and then as office space and a private residence. Brother Paul Ambrose Fontaine used the Gatehouse as his office during his tenure as President of the College. The Gatehouse was renamed the Kieran Gatehouse in October 1990 when it was dedicated to the late Brother Kieran Thomas Brennan. Not only was Brother Brennan a long-time trustee of Marist College, but he was also the director of student Brothers from 1954 to 1964.</p>
			  	</div>
		  	</div>
	  	</div>
	  	
	  	<div id="tabs2">
	  		<div class="antiscroll-wrap">
	        	<div class="antiscroll-inner">
					<div id="audioTitle">
						Now Playing:<br>
						<div class="info1">Index #001 - Perreault, Adrian, 11 June 2001</div>	
					</div>
					<audio controls = "control">
						<source src="audio/Perreault.ogg" type="audio/ogg"/>
						<source src="audio/Perreault.mp3" type="audio/mpeg"/>
						Your browser does not support the audio element. Please use the old version.
					</audio>
					<div id="audioList">
						<div class="list"><a href="Perreault" class="listItem" type="audio">Index #001 - Perreault, Adrian, 11 June 2001</a><a href="pdfs/Perreault.pdf">&nbsp;&nbsp;&nbsp;<img src="../images/pdf.gif" /></a></div>
						<div class="list"><a href="Nolan" class="listItem" type="audio">Index #003 - Nolan, Gus, 04 Oct. 2001 </a><a href="pdfs/Nolan.pdf">&nbsp;&nbsp;&nbsp;<img src="../images/pdf.gif" /></a></div>
						<p><bR><br></p>
					</div>
				</div>
		  	</div>
	  	</div>
	  	
		<div id="tabs3">
			<div class="antiscroll-wrap">
	        	<div class="antiscroll-inner">
					<table class="gallery">
			  			<tbody>
			  			<tr>
			  				<td><a href="kieran/images/01.jpg" class="highslide" onclick="return hs.expand(this)"><img src="kieran/thumbnails/01.jpg" width="100" height="100" alt="Front and side view of Kieran Gatehouse, 2003" /></a></td>
			  				<td><a href="kieran/images/02.jpg" class="highslide" onclick="return hs.expand(this)"><img src="kieran/thumbnails/02.jpg" width="100" height="100" alt="Side view of Kieran Gatehouse, 2003" /></a></td>
			  				<td><a href="kieran/images/03.jpg" class="highslide" onclick="return hs.expand(this)"><img src="kieran/thumbnails/03.jpg" width="100" height="100" alt="Front view of Kieran Gatehouse, 2003" /></a></td>
			  			</tr>
			  			</tbody>
		  			</table>
		  		</div>
	  		</div>
	  	</div>
	</body>
</html>
